<template>
  <div class="client-add">
    <pageHeader :title="title" :breadCrumb="breadCrumb" :show-back="true">
      <template #footer>
        <a-space v-if="form.state === 1" :size="20">
          <a-button type="outline" @clikc="router.go(-1)">
            <template #default>取消</template>
          </a-button>
          <a-button type="primary" @click="ConfirmShipment">
            <template #default>确认发货</template>
          </a-button>
        </a-space>
        <a-space
          v-if="
            form.state === 2 &&
            route.query.state !== 'edit' &&
            route.query.state !== 'details'
          "
          :size="20"
        >
          <a-button type="outline" @clikc="router.go(-1)">
            <template #default>取消</template>
          </a-button>
          <a-button type="primary" @click="ConfirmReceipt">
            <template #default>确认签收</template>
          </a-button>
        </a-space>
        <a-space
          v-if="
            form.state === 4 &&
            route.query.state !== 'edit' &&
            route.query.state !== 'details'
          "
          :size="20"
        >
          <a-button type="outline" @clikc="router.go(-1)">
            <template #default>取消</template>
          </a-button>
          <a-button type="primary" @click="ConfirmReceipt">
            <template #default>异常签收</template>
          </a-button>
        </a-space>
        <a-space
          v-if="
            form.state === 5 &&
            route.query.state !== 'edit' &&
            route.query.state !== 'details'
          "
          :size="20"
        >
          <a-button type="outline" @clikc="router.go(-1)">
            <template #default>取消</template>
          </a-button>
          <a-button type="primary" @click="ConfirmReceipt">
            <template #default>客户拒签</template>
          </a-button>
        </a-space>
      </template>
      <div class="base-info">
        <TitleBox title="基本消息"></TitleBox>
        <div class="base-info-header">
          <a-form :model="taskData" style="width: 60%" auto-label-width>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item label="委外发货单号:"
                  ><a-input
                    style="width: 320px"
                    placeholder="系统自动生成"
                    disabled
                    v-model="form.number"
                /></a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label="关联委外订单号：">
                  <a-input
                    style="width: 320px"
                    placeholder="系统自动生成"
                    disabled
                    v-model="form.outsourcingNumber"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item label="出库单下达时间："
                  ><a-date-picker
                    placeholder="系统自动生成"
                    :style="{ width: '320px' }"
                    disabled
                    v-model="form.CreatedAt"
                /></a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label="关联出库单号："
                  ><a-input
                    :style="{ width: '320px' }"
                    placeholder="无"
                    v-model="form.outboundNumber"
                    disabled
                    allow-clear
                /></a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item label="收货人：">
                  <a-input
                    :style="{ width: '320px' }"
                    v-model="form.consigneeName"
                    placeholder="请输入收货人名称"
                    allow-clear
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item label="收货人联系电话：">
                  <a-input
                    :style="{ width: '320px' }"
                    v-model="form.consigneePhone"
                    placeholder="请输入收货人联系电话"
                    allow-clear
                    disabled
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label="送货地址：">
                  <a-input
                    v-model="form.consigneeAddress"
                    :style="{ width: '320px' }"
                    placeholder="请输入送货地址"
                    allow-clear
                    disabled
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item label="备注：">
                  <a-textarea
                    v-model="form.remark"
                    :disabled="
                      route.query.state === 'edit' ||
                      route.query.state === 'details'
                    "
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <TitleBox title="发货物料明细"></TitleBox>
        <div class="base-info-header">
          <tableTurn
            style="margin-top: 10px"
            :table-data="getProduct"
            :ref="tableRef"
            :pagination="false"
            :args="args"
          >
            <a-table-column :width="80" align="center">
              <template #title> 序号 </template>
              <template #cell="{ rowIndex }">
                <div style="position: relative">
                  <div>{{ rowIndex + 1 }}</div>
                </div>
              </template>
            </a-table-column>
            <a-table-column
              align="center"
              :width="80"
              title="物料编码"
              data-index="productNumber"
            >
            </a-table-column>
            <a-table-column
              align="center"
              :width="80"
              title="物料名称"
              data-index="productName"
            >
            </a-table-column>

            <a-table-column
              align="center"
              :width="80"
              title="规格型号"
              data-index="spec"
            >
            </a-table-column>

            <a-table-column
              align="center"
              :width="80"
              title="本次发货数量"
              data-index="amount"
            >
            </a-table-column>
          </tableTurn>
        </div>
        <TitleBox title="发货人信息"></TitleBox>
        <div class="base-info-header">
          <a-form
            ref="FormRef"
            style="width: 60%"
            :model="form"
            :rules="rules"
            auto-label-width
          >
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item field="invoiceStaffName" label="发货人:">
                  <a-input
                    :disabled="form.state > 1"
                    style="width: 320px"
                    v-model="form.invoiceStaffName"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item field="invoiceStaffPhone" label="联系电话：">
                  <a-input
                    :disabled="form.state > 1"
                    v-model="form.invoiceStaffPhone"
                    style="width: 320px"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <TitleBox
          title="签收人信息"
          v-if="form.state === 2 || form.state === 3 || form.state === 4"
        ></TitleBox>
        <div
          class="base-info-header"
          v-if="form.state === 2 || form.state === 3 || form.state === 4"
        >
          <a-form
            style="width: 60%"
            ref="FormRef"
            :model="form"
            :rules="rules"
            auto-label-width
          >
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item label="签收人:" field="signStaffName">
                  <a-input
                    :disabled="route.query.state === 'details'"
                    style="width: 320px"
                    v-model="form.signStaffName"
                  />
                </a-form-item>
              </a-col>
              <a-col :span="11">
                <a-form-item label="联系电话：" field="signStaffPhone">
                  <a-input
                    :disabled="route.query.state === 'details'"
                    :style="{ width: '320px' }"
                    v-model="form.signStaffPhone"
                  />
                </a-form-item>
              </a-col>
            </a-row>
            <a-row :gutter="24" justify="space-between">
              <a-col :span="11">
                <a-form-item label="实际签收时间:" field="signDate">
                  <a-date-picker
                    :disabled="route.query.state === 'details'"
                    v-model="form.signDate"
                    style="width: 320px"
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
        <TitleBox
          :title="form.state === 4 ? '异常签收原因' : '客户拒签原因'"
          v-if="form.state === 4 || form.state === 5"
        ></TitleBox>

        <div
          class="base-info-header"
          v-if="form.state === 4 || form.state === 5"
        >
          <a-form ref="FormRef" :model="form" auto-label-width>
            <a-row :gutter="24">
              <a-col :span="24">
                <a-form-item label="原因:">
                  <a-textarea
                    :disabled="route.query.state === 'details'"
                    v-model="form.unusualRemark"
                    allow-clear
                  />
                </a-form-item>
              </a-col>
            </a-row>
          </a-form>
        </div>
      </div>
      <!-- <div>
        <div class="info-item">
          <div style="width: 100%; display: flex; margin: 20px 50px">
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <h3>基本信息</h3>
            </a-space>
          </div>
          <div
            style="
              width: 100%;
              display: flex;
              justify-content: center;
              padding: 20px;
            "
            ><a-form :model="taskData" style="width: 60%" auto-label-width>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item label="委外发货单号:"
                    ><a-input
                      style="width: 320px"
                      placeholder="系统自动生成"
                      disabled
                      v-model="form.number"
                  /></a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item label="关联委外订单号：">
                    <a-input
                      style="width: 320px"
                      placeholder="系统自动生成"
                      disabled
                      v-model="form.outsourcingNumber"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item label="出库单下达时间："
                    ><a-date-picker
                      placeholder="系统自动生成"
                      :style="{ width: '320px' }"
                      disabled
                      v-model="form.CreatedAt"
                  /></a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item label="关联出库单号："
                    ><a-input
                      :style="{ width: '320px' }"
                      placeholder="无"
                      v-model="form.outboundNumber"
                      disabled
                      allow-clear
                  /></a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item label="收货人：">
                    <a-input
                      :style="{ width: '320px' }"
                      v-model="form.consigneeName"
                      placeholder="请输入收货人名称"
                      allow-clear
                      disabled
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item label="收货人联系电话：">
                    <a-input
                      :style="{ width: '320px' }"
                      v-model="form.consigneePhone"
                      placeholder="请输入收货人联系电话"
                      allow-clear
                      disabled
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item label="送货地址：">
                    <a-input
                      v-model="form.consigneeAddress"
                      :style="{ width: '320px' }"
                      placeholder="请输入收货人联系电话"
                      allow-clear
                      disabled
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24">
                <a-col :span="24">
                  <a-form-item label="备注：">
                    <a-textarea
                      v-model="form.remark"
                      :disabled="
                        route.query.state === 'edit' ||
                        route.query.state === 'details'
                      "
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div style="width: 100%; display: flex; margin: 20px 50px">
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <a-space :size="50"><h3>发货物料明细：</h3></a-space>
            </a-space>
          </div>
          <div
            style="
              width: 90%;
              margin-left: 5%;
              box-shadow: 1px 1px 5px rgb(153 153 153 / 35%);
              border-radius: 4px;
            "
          >
            <div style="padding: 30px">
              <div style="text-align: right" class="button-item"></div
              ><tableTurn
                style="margin-top: 10px"
                :table-data="getProduct"
                :ref="tableRef"
                :pagination="false"
                :args="args"
              >
                <a-table-column :width="80" align="center">
                  <template #title> 序号 </template>
                  <template #cell="{ rowIndex }">
                    <div style="position: relative">
                      <div>{{ rowIndex + 1 }}</div>
                    </div>
                  </template>
                </a-table-column>
                <a-table-column
                  align="center"
                  :width="80"
                  title="物料编码"
                  data-index="productNumber"
                >
                </a-table-column>
                <a-table-column
                  align="center"
                  :width="80"
                  title="物料名称"
                  data-index="productName"
                >
                </a-table-column>

                <a-table-column
                  align="center"
                  :width="80"
                  title="规格型号"
                  data-index="spec"
                >
                </a-table-column>

                <a-table-column
                  align="center"
                  :width="80"
                  title="本次发货数量"
                  data-index="amount"
                >
                </a-table-column> </tableTurn
            ></div>
          </div>
          <div style="width: 100%; display: flex; margin: 20px 50px">
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <h3>发货人信息</h3>
            </a-space>
          </div>
          <div style="width: 100%; display: flex; justify-content: center"
            ><a-form
              ref="FormRef"
              style="width: 60%"
              :model="form"
              :rules="rules"
              auto-label-width
            >
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item field="invoiceStaffName" label="发货人:">
                    <a-input
                      :disabled="form.state > 1"
                      style="width: 320px"
                      v-model="form.invoiceStaffName"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item field="invoiceStaffPhone" label="联系电话：">
                    <a-input
                      :disabled="form.state > 1"
                      v-model="form.invoiceStaffPhone"
                      style="width: 320px"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div
            v-if="form.state === 2 || form.state === 3 || form.state === 4"
            style="width: 100%; display: flex; margin: 20px 50px"
          >
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <h3>签收人信息</h3>
            </a-space>
          </div>
          <div
            v-if="form.state === 2 || form.state === 3 || form.state === 4"
            style="width: 100%; display: flex; justify-content: center"
            ><a-form
              style="width: 60%"
              ref="FormRef"
              :model="form"
              :rules="rules"
              auto-label-width
            >
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item label="签收人:" field="signStaffName">
                    <a-input
                      :disabled="route.query.state === 'details'"
                      style="width: 320px"
                      v-model="form.signStaffName"
                    />
                  </a-form-item>
                </a-col>
                <a-col :span="11">
                  <a-form-item label="联系电话：" field="signStaffPhone">
                    <a-input
                      :disabled="route.query.state === 'details'"
                      :style="{ width: '320px' }"
                      v-model="form.signStaffPhone"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
              <a-row :gutter="24" justify="space-between">
                <a-col :span="11">
                  <a-form-item label="实际签收时间:" field="signDate">
                    <a-date-picker
                      :disabled="route.query.state === 'details'"
                      v-model="form.signDate"
                      style="width: 320px"
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
          <div
            v-if="form.state === 4 || form.state === 5"
            style="width: 100%; display: flex; margin: 20px 50px"
          >
            <a-space>
              <div
                style="
                  width: 4px;
                  height: 15px;
                  background-color: rgba(61, 126, 255, 1);
                  border: none;
                  border-radius: 2px;
                "
              >
              </div>
              <h3>{{ form.state === 4 ? '异常签收原因' : '客户拒签原因' }}</h3>
            </a-space>
          </div>
          <div
            style="margin-left: 10%"
            v-if="form.state === 4 || form.state === 5"
            ><a-form ref="FormRef" :model="form" auto-label-width>
              <a-row :gutter="24">
                <a-col :span="24">
                  <a-form-item label="原因:">
                    <a-textarea
                      :disabled="route.query.state === 'details'"
                      v-model="form.unusualRemark"
                      allow-clear
                    />
                  </a-form-item>
                </a-col>
              </a-row>
            </a-form>
          </div>
        </div>
      </div> -->
    </pageHeader>
  </div>
</template>

<script lang="ts" setup>
  import {
    reactive,
    ref,
    computed,
    onMounted,
    defineAsyncComponent,
  } from 'vue';
  import { useRoute, useRouter } from 'vue-router';
  import regex from '@/utils/regex';
  import {
    getInvoiceOne,
    putConfirmInvoice,
    putConfirmSign,
  } from '@/api/inventory-management/outbound-management/sales-shipment-outbound/sales-shipment/index';
  import { openChoiceFile } from '@/utils/file';
  import { FileUpload } from '@/utils/upload';

  const router = useRouter();
  const route = useRoute();
  const FormRef = ref();
  const title: string = '发货详情';
  const breadCrumb: string[] = [
    '库存管理',
    '出库管理',
    '委外发货出库',
    '发货详情',
  ];
  const ids = Number(route.query.id);
  const form = ref<any>({
    number: '',
    orderId: undefined,
    outboundType: 1,
    warehouseStaffId: undefined,
    inspectionStaffId: undefined,
    consigneeName: '',
    consigneePhone: '',
    consigneeAddress: '',
    outboundDate: '',
    remark: '',
    state: 1,
    OutboundWarehouseItem: [],
    salesOrderNumber: undefined,
    clientCompanyName: '',
    clientCompanyId: undefined,
    userStaffName: '',
    userStaffId: undefined,
    invoiceStaffName: '',
    invoiceStaffPhone: '',
    file: [],
  });

  // 表格配置
  const args = reactive({
    stripe: false,
    bordered: {
      headerCell: true,
    },
    rowKey: 'id', // 批量选择按钮 以合同名称来作为key
  });

  const getProduct = async () => {
    try {
      const res = await getInvoiceOne({ id: ids });
      console.log(res);
      form.value = res;
      if (
        route.query.state !== 'details' &&
        route.query.state !== 'edit' &&
        route.query.state
      )
        form.value.state = Number(route.query.state);
      return Promise.resolve(form.value.warehouseInvoiceItem);
    } catch (err: unknown) {
      console.log(err);
    }
  };

  // 校验手机
  const validatePhone = (val: any, callback: any) => {
    if (val === undefined) callback(new Error('请输入电话号码'));
    else if (!regex.phone.role.test(val)) callback('请输入正确的电话号码');
    return true;
  };

  // 表单rules
  const rules = reactive({
    invoiceStaffName: [
      {
        required: true,
        message: '请输入联系人姓名',
      },
    ],
    signStaffName: [
      {
        required: true,
        message: '请输入签收人姓名',
      },
    ],
    signStaffPhone: [
      {
        required: true,
        validator: validatePhone,
      },
    ],
    signDate: [
      {
        required: true,
        message: '请选择签收日期',
      },
    ],
    invoiceStaffPhone: [
      {
        required: true,
        validator: validatePhone,
      },
    ],
  });

  const ConfirmShipment = async () => {
    FormRef.value.validate(async (res: any) => {
      if (!res) {
        await putConfirmInvoice({ ...form.value });
        router.go(-1);
      }
    });
  };

  const ConfirmReceipt = async () => {
    FormRef.value.validate(async (res: any) => {
      if (!res) {
        form.value.signDate = new Date(form.value.signDate).toJSON();
        form.value.state = form.value.state === 2 ? 3 : form.value.state;
        await putConfirmSign({ ...form.value });
        router.go(-1);
      }
    });
  };

  const formList = ref({});
  const upload = async (Uindex: any) => {
    let file = new FormData();
    formList.value.file = await openChoiceFile(
      ['.xlsx', '.pdf', '.png', '.txt', '.jpg', '.docx'],
      1024 * 1024 * 10
    );
    file.append('data', formList.value.file);
    const res: any = await FileUpload(file);
    if (res) {
      let { name, addr, sourceAddr } = res.data.data;
      form.value.file.push({
        name,
        fileAddr: addr,
        addr: sourceAddr,
        fileType: 3,
      });
    }
  };

  const delFile = (index: number) => {
    form.value.file.splice(index, 1);
  };
</script>

<style scoped lang="less">
  // .basic-item {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  //   border: 2px solid rgba(242, 243, 245, 0.852);
  // }

  // .title {
  //   display: flex;
  //   align-items: center;
  //   justify-content: center;
  // }

  // .title-item {
  //   width: 95%;
  //   height: 60px;
  //   margin: auto;
  //   background-color: rgba(245, 247, 250);
  //   line-height: 60px;
  //   margin-top: 20px;
  // }

  // .info-item {
  //   width: 100%;
  // }

  // .report-item {
  //   width: 95%;
  //   height: 60px;
  //   margin: auto;
  //   background-color: rgba(245, 247, 250);
  //   line-height: 60px;
  // }

  // .order-info {
  //   width: 95%;
  //   margin: 20px auto;
  // }

  // :deep(.arco-form) {
  //   width: 90%;
  // }

  // .uploadFile {
  //   display: flex;
  //   flex-wrap: nowrap;
  //   align-items: center;
  //   justify-content: space-between;
  //   box-sizing: border-box;
  //   width: 40%;
  //   padding: 8px 10px 8px 12px;
  //   overflow: hidden;
  //   font-size: 14px;
  //   background-color: var(--color-fill-1);
  //   border-radius: var(--border-radius-small);
  //   transition: background-color 0.1s cubic-bezier(0, 0, 1, 1);
  //   margin-top: 10px;
  //   padding: 10px;
  // }

  .client-add {
    .base-info {
      padding: 10px 40px 10px 40px;

      .avatar {
        position: absolute;
        width: 100px;
      }
      &-header {
        // padding: 0 100px;
        width: 100%;
        display: flex;
        align-items: center;
        justify-content: center;
        // :deep(.arco-form-item-content-flex) {
        //   display: block;
        //   line-height: 32px;
        //   color: #cccccc29;
        // }
      }

      &-extra {
        .contact-info,
        .invoice-info,
        .client-info,
        .remarks-info {
          padding: 0 100px;
        }
      }
    }
  }
</style>
